<template>
  <div>
    <div class="banner" @click="handleClick">
      <img class="banner-img" :src="this.bannerImg" alt="">
      <div class="banner-info">
        <div class="banner-number">
          <span class="iconfont banner-icon">&#xe740;</span>
          {{this.gallaryImgs.length}}
        </div>
        <div class="banner-title">{{this.sightName}}</div>
      </div>
    </div>
    <fade-animation>
      <common-gallery
        :imgs="gallaryImgs"
        v-show="showGallery"
        @close="handleCloseGallery"
      ></common-gallery>
    </fade-animation>
  </div>
</template>

<script>
  //引用公用的gallery组件
  import CommonGallery from 'common/gallery/gallery'
  import FadeAnimation from 'common/fade/fade'
  export default {
    name: "DetailBanner",
    components:{
      CommonGallery,
      FadeAnimation
    },
    props:{
      sightName:String,
      bannerImg:String,
      gallaryImgs:Array
    },
    data (){
      return {
        showGallery:false,
      }
    },
    methods:{
      handleClick(){
        this.showGallery = true;
      },
      //由子组件触发的隐藏组件函数
      handleCloseGallery(){
        this.showGallery = false;
      }
    }
  }
</script>

<style scoped lang="stylus">
  .banner
    overflow: hidden
    position:relative
    height:0
    padding-bottom:55%
    .banner-img
      width:100%
    .banner-info
      position:absolute
      left:0
      right:0
      bottom:0
      line-height:.6rem
      color:#fff
      padding-left:.2rem
      background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8));
      .banner-number
        display: inline-block
        padding:0 .4rem
        height:.4rem
        line-height:.4rem
        border-radius:.2rem
        background:rgba(0,0,0,.8)
        font-size:.28rem
        .banner-icon
          margin-right:.1rem
      .banner-title
        font-size:.32rem
</style>
